<template>
    <teleport to="#app">
            <div id="frameFormPop" >
            <transition name="mark_tran">
                <div class="pop_mark" v-show="isShow" :style="'z-index:'+zIndexMark"></div>
            </transition>
            
            <transition name="pop_div_elastic_tran">
                <div class="pop_form_div pop_div"  v-show="isShow" :style="'width:'+width+';z-index:'+zIndexPop">
                    <div class="pop_head" v-if="n_data.title != null && n_data.title != ''">
                        <i class="bi bi-x-circle ver-mid" style="color:red" v-if="n_data.type == 'error'"></i>
                        <i class="bi bi-check-circle ver-mid" style="color:var(--success-background-dark);" v-else-if="n_data.type == 'success'"></i>
                        <i class="bi bi-exclamation-circle ver-mid" style="color:var(--warning-background-dark);" v-else-if="n_data.type == 'warning'"></i>
                        {{n_data.title}}
                    </div>
                    <div class="pop_body" >
                        <!-- 这里是body -->
                        <g-form ref="g_form">
                            <slot name="pop-form-item"></slot>
                            <slot ></slot>
                        </g-form>
                        
                        
                    </div>
                    <div class="pop_foot">
                        <button :class="{btn:true,default_btn:n_data.confirm,default_btn_nobg:!n_data.confirm}" @click="change(n_data)">取消</button>
                        <button class="btn primary_btn" v-if="n_data.confirm" @click="ok(n_data)" ref="saveBtn">保存</button>
                    </div>
                </div>
            </transition>
        </div>
    </teleport>
    
    
</template>
<script>
import {ref} from 'vue';
export default {
    name:'g-f-pop',
    props:{
        data:{
            type:Object,
            default:{}
        },
        width:{
            type:String,
            default:'500px'
        },
        zIndexMark:{
            type:Number,
            default:998
        },
        zIndexPop:{
            type:Number,
            default:998
        }
    },
    setup(props){
        let n_data = ref({});
        let plugin = ref({});
        let isShow = ref(false);
        let g_form = ref(null);
        let saveBtn = ref(null);
        let width = ref(props.width);

        let change = (data)=>{
            n_data.value = data;
            plugin.value = data.plugin;
            isShow.value = !isShow.value;
            
        }
        let activeBtn = ()=>{
            saveBtn.value.disabled = '';
            saveBtn.value.style.background = '#007DFF';
            saveBtn.value.innerText = '保存'
        }
        
        let ok = (data)=>{
            // saveBtn.value.disabled = 'disabled';
            // saveBtn.value.style.background = '#d9d9d9';
            // saveBtn.value.innerText = '正在保存'


            data.success(g_form.value.getFormData());
        }
        
        
        return {
            saveBtn,
            ok,n_data,plugin,activeBtn,
            isShow,change,g_form,width
        }
    }
}
</script>
<style scoped>
    #frameFormPop{
        /* position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 99999; */
    }
    .pop_mark{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 998;
        background-color: rgba(0, 0, 0, 0.3);
    }
    
    .pop_head i,
    .pop_body i{
        font-size: 25px;
    }
    
    .pop_form_div button{
        margin: 0 10px;
    }


    
</style>